<!-- 储存空间 -->
<template>
  <div class="contentBX">
    <div style="margin-top: 70px">云盘使用情况</div>

    <div class="box" style="margin-top: 10px">
      <div class="Subbox" :style="{ width: `${bytesToGB()}%` || 0 }"></div>
      <div style="width: 100%; height: 20px">
        <a-space style="margin-top: 10px" :size="40"
          ><a-space
            ><div
              style="
                border-radius: 1px;
                height: 6px;
                width: 6px;
                background-color: rgb(0, 137, 255);
              "
            ></div>
            <div>已使用量</div>
            <div>
              {{ bytesToSize(props.data.usedStorageSpace) }}
            </div></a-space
          ><a-space
            ><div
              style="
                border-radius: 1px;
                height: 6px;
                width: 6px;
                background-color: rgb(241, 242, 243);
              "
            ></div>
            <div>总量</div>
            <div>
              {{ bytesToSize(props.data.storageSpace) }}
            </div></a-space
          ></a-space
        >
      </div>
    </div>
    <!-- <a-progress
      :percent="
        Number(
          (
            (props.data.usedStorageSpace / props.data.storageSpace) *
            100
          ).toFixed(4)
        )
      "
      trackColor="var(--color-primary-light-1)"
      style="margin-bottom: 20px"
    /> -->
  </div>

  <!-- <div style="width: 600px; height: 300px; margin: 20px"></div> -->
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';

const props = withDefaults(
  defineProps<{
    data: any;
  }>(),
  {}
);

function bytesToSize(bytes) {
  if (bytes === 0) return '0 B';
  var k = 1024, // or 1024
    sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
    i = Math.floor(Math.log(bytes) / Math.log(k));

  return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
}

function bytesToGB() {
  if (props.data.usedStorageSpace === 0) return 0;
  return (
    (props.data.usedStorageSpace / props.data.storageSpace) *
    100
  ).toFixed(2);
}
</script>

<style lang="less" scoped>
.contentBX {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.box {
  width: 100%;
  height: 20px;
  border-radius: 5px;
  background-color: rgb(241, 242, 243);
}

.Subbox {
  height: 20px;
  border-radius: 5px;
  background-color: #007eea;
}
</style>
